<template>
  <div class="hot-topics-container">
    <!-- 搜索和操作区域 -->
    <div class="operation-area">
      <el-input
        v-model="searchQuery"
        placeholder="请输入话题关键词"
        style="width: 300px; margin-right: 10px"
        @keyup.enter.native="handleSearch"
      >
        <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
      </el-input>
      
      <el-button type="primary" @click="handleAdd">新增热门话题</el-button>
      <el-button type="danger" @click="handleBatchDelete" :disabled="!selectedTopics.length">批量删除</el-button>
    </div>

    <!-- 热门话题表格 -->
    <el-table
      :data="filteredTopics"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="title" label="话题标题"></el-table-column>
      <el-table-column prop="heat" label="热度" width="120">
        <template slot-scope="scope">
          <el-rate v-model="scope.row.heat" disabled></el-rate>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status ? 'success' : 'danger'">
            {{ scope.row.status ? '启用' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalTopics"
    ></el-pagination>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
      <el-form :model="topicForm" :rules="rules" ref="topicForm" label-width="120px">
        <el-form-item label="话题标题" prop="title">
          <el-input v-model="topicForm.title" placeholder="请输入话题标题"></el-input>
        </el-form-item>
        
        <el-form-item label="热度" prop="heat">
          <el-rate v-model="topicForm.heat" :max="5"></el-rate>
        </el-form-item>
        
        <el-form-item label="状态" prop="status">
          <el-switch
            v-model="topicForm.status"
            active-text="启用"
            inactive-text="停用">
          </el-switch>
        </el-form-item>
        
        <el-form-item label="话题描述" prop="description">
          <el-input
            type="textarea"
            :rows="5"
            v-model="topicForm.description"
            placeholder="请输入话题描述">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitTopicForm">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'HotTopicsManagement',
  data() {
    return {
      topics: [
        // 模拟数据
        {
          id: 1,
          title: '春季过敏预防',
          heat: 4,
          description: '春季过敏预防措施和注意事项',
          createTime: '2023-03-15',
          updateTime: '2023-03-20',
          status: true
        },
        {
          id: 2,
          title: '糖尿病饮食指南',
          heat: 5,
          description: '糖尿病患者日常饮食建议',
          createTime: '2023-02-10',
          updateTime: '2023-03-18',
          status: true
        }
      ],
      searchQuery: '',
      selectedTopics: [],
      currentPage: 1,
      pageSize: 10,
      dialogVisible: false,
      dialogTitle: '新增热门话题',
      topicForm: {
        id: '',
        title: '',
        heat: 3,
        description: '',
        status: true
      },
      rules: {
        title: [{ required: true, message: '请输入话题标题', trigger: 'blur' }],
        heat: [{ required: true, message: '请设置热度', trigger: 'change' }]
      },
      isEdit: false
    }
  },
  computed: {
    filteredTopics() {
      return this.topics.filter(topic => {
        return (
          topic.title.includes(this.searchQuery) ||
          topic.description.includes(this.searchQuery)
        )
      })
    },
    totalTopics() {
      return this.filteredTopics.length
    }
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
    },
    handleSelectionChange(val) {
      this.selectedTopics = val
    },
    handleAdd() {
      this.dialogTitle = '新增热门话题'
      this.topicForm = {
        id: '',
        title: '',
        heat: 3,
        description: '',
        status: true
      }
      this.isEdit = false
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.dialogTitle = '编辑热门话题'
      this.topicForm = JSON.parse(JSON.stringify(row))
      this.isEdit = true
      this.dialogVisible = true
    },
    handleDelete(row) {
      this.$confirm('确认删除该热门话题?', '提示', {
        type: 'warning'
      }).then(() => {
        const index = this.topics.findIndex(item => item.id === row.id)
        this.topics.splice(index, 1)
        this.$message.success('删除成功')
      })
    },
    handleBatchDelete() {
      this.$confirm('确认删除选中的热门话题?', '提示', {
        type: 'warning'
      }).then(() => {
        this.selectedTopics.forEach(item => {
          const index = this.topics.findIndex(topic => topic.id === item.id)
          this.topics.splice(index, 1)
        })
        this.selectedTopics = []
        this.$message.success('删除成功')
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    submitTopicForm() {
      this.$refs.topicForm.validate(valid => {
        if (valid) {
          if (this.isEdit) {
            const index = this.topics.findIndex(item => item.id === this.topicForm.id)
            this.topics.splice(index, 1, this.topicForm)
            this.$message.success('修改成功')
          } else {
            const newId = this.topics.length > 0 ? Math.max(...this.topics.map(item => item.id)) + 1 : 1
            this.topicForm.id = newId
            this.topicForm.createTime = new Date().toISOString().split('T')[0]
            this.topicForm.updateTime = new Date().toISOString().split('T')[0]
            this.topics.push(this.topicForm)
            this.$message.success('添加成功')
          }
          this.dialogVisible = false
        }
      })
    }
  }
}
</script>

<style scoped>
.hot-topics-container {
  padding: 20px;
}

.operation-area {
  margin-bottom: 20px;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>